import { Button, List, Avatar, message, Form, Image, } from 'antd';
import { ProForm, ProFormText } from '@ant-design/pro-components';
import React, { useRef, useState, useEffect } from 'react';
import { request } from '../../utils/request.ts';
import Add from './add.jsx';
import '../CoachCertificate/index.css';
import RemoteSelect from '../../components/RemoteSelect/index.jsx';
import ChangeCoach from '../CoachCertificate/changeCoach.jsx';

const StudentCertificate = () => {
  const [form] = Form.useForm();
  const [coachChangeOpen, setCoachChangeOpen] = useState(false);
  const [record, setRecord] = useState({});
  const [open, setOpen] = useState(false);
  const [list, setList] = useState([]);
  const [initLoading, setInitLoading] = useState(true);
  const [pageNum, setPageNum] = useState(1);
  const [total, setTotal] = useState(0);
  const [cardId, setCardId] = useState();
  const [code, setCode] = useState();
  const [search, setSearch] = useState({});
  const pageSize = 20;
  const fetchList = async (nextPageNum = 1, append = false, searchCode = code, searchCardId = cardId, mobilephone, name,) => {
    setInitLoading(true);
    const data = {
      pageNum: nextPageNum,
      pageSize,
      cardId: searchCardId || -1,
      // code: searchCode || -1,
      mobilephone,
      name,
    };
    const res = await request('/api/studentCardDetail/pageList', {
      method: 'POST',
      data,
    });
    setInitLoading(false);
    if (res?.data) {
      setTotal(res?.data?.total || 0);
      if (append) {
        setList(prev => [...prev, ...(res?.data?.records || [])]);
      } else {
        setList(res?.data?.records);
      }
    } else {
      message.error(res?.msg);
    }
  };
  useEffect(() => {
    fetchList(1, false, code, cardId, search?.mobilephone, search?.name);
  }, []);
  const handleLoadMore = () => {
    const nextPage = pageNum + 1;
    setPageNum(nextPage);
    fetchList(nextPage, true, code, cardId, search?.mobilephone, search?.name);
  };
  const handleSearch = (values) => {
    setSearch(values);
    console.log('search', values);
    setPageNum(1);
    fetchList(1, false, code, cardId, values?.mobilephone, values?.name);
  };
  return (
    <>
      <div className='search'>
        <ProForm
          form={form}
          onFinish={handleSearch}
          submitter={false}
          layout="inline" // 关键点
          labelCol={{ span: 10 }} // label 占 6/24
          wrapperCol={{ span: 14 }} // 输入框占 18/24
        >
          <RemoteSelect
            name="cardId"
            label="证书名称"
            fetchUrl="/api/card/pageList"
            fetchMethod="POST"
            fetchParams={{ type: '2' }}
            mapOption={item => ({ label: item.name, value: item.id })}
            placeholder="请选择证书名称"
            fieldProps={{
              value: cardId,
              onChange: setCardId,
              allowClear: true,
            }}
          />
          <RemoteSelect
            name="code"
            label="认证批次号"
            fetchUrl="/api/studentCard/pageList"
            fetchMethod="POST"
            fetchParams={{ status: '-1', cardId: '-1', }}
            mapOption={item => ({ label: item.name, value: item.id })}
            placeholder="请选择认证批次号"
            fieldProps={{
              value: code,
              onChange: setCode,
              allowClear: true,
            }}
          />
          <ProFormText name="mobilephone" label="手机号" />
          <ProFormText name="name" label="姓名" />
          <Button type="primary" htmlType="submit">查询</Button>
        </ProForm>
      </div>
      <div className='toolbtns'>
        <Button type="primary" onClick={() => { setOpen(true); }}>新增</Button>
      </div>
      <List
        className="coach-certificate-list"
        loading={initLoading}
        itemLayout="horizontal"
        loadMore={
          list.length < total && (
            <Button onClick={handleLoadMore} loading={initLoading} style={{ width: '100%' }}>
              加载更多
            </Button>
          )
        }
        dataSource={list}
        renderItem={(item) => (
          <List.Item
            actions={[<Image src={item?.coachPic} width={200} />]}
          >
            <List.Item.Meta
              avatar={
                <>
                  <Avatar src={item?.pic} />
                  {/* <div>
                    <Button>调整头像</Button>
                  </div> */}
                </>
              }
            />
            <ul className='content'>
              <li>{item.name}</li>
              <li>{item.birthday}({item.sex})</li>
              <li>{item.address}</li>
              <li>{item.mobilephone}<span className='email'>{item.email}</span></li>
              <Button onClick={() => { setRecord(item); setCoachChangeOpen(true); }}>变更会员信息</Button>
            </ul>
          </List.Item>
        )}
      />
      <Add open={open} setOpen={setOpen} reload={fetchList} />
      <ChangeCoach open={coachChangeOpen} setOpen={setCoachChangeOpen} record={record} reload={fetchList} />
    </>
  );
};

export default StudentCertificate;
